import React, { useMemo } from "react";
import { Table, TableProps } from '@arco-design/web-react';

interface FileItem {
  name: string;
  isDirectory: boolean;
  ext?: string;
  size?: number;
  modified?: string;
}

type FileTableProps = {
  
  files: FileItem[];
  loading: boolean;
  onFolderClick: (folderName: string) => void;
  onFileClick: (fileName: string) => void;
  formatFileSize: (bytes: number) => string;
} & Partial<TableProps<TableData>>

export type TableData = {
  isDirectory: boolean;
  ext?: string;

  modified?: string;
  key: number;
  name: string;
  type: string;
  size: string;

};

// 根据文件扩展名获取相应的emoji图标
const getFileIcon = (ext: string | undefined, isDirectory: boolean) => {
  if (isDirectory) {
    return <span className="mr-2 text-lg">📁</span>;
  }

  if (!ext) {
    return <span className="mr-2 text-lg">📄</span>;
  }

  // 移除扩展名中的点号并转换为小写
  const cleanExt = ext.toLowerCase().replace(/^\./, '');

  // 音频文件
  if (['mp3', 'wav', 'ogg', 'flac', 'aac', 'wma', 'm4a', 'aiff', 'au', 'mid', 'midi'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">🎵</span>;
  }

  // 图片文件
  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico', 'tiff', 'tif'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">🖼️</span>;
  }

  // PDF文件
  if (cleanExt === 'pdf') {
    return <span className="mr-2 text-lg">📕</span>;
  }

  // 视频文件
  if (['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'm4v', 'mpg', 'mpeg', '3gp'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">🎬</span>;
  }

  // 文档文件
  if (['doc', 'docx', 'txt', 'rtf', 'odt', 'md', 'markdown'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">📝</span>;
  }

  // 电子表格文件
  if (['xls', 'xlsx', 'csv', 'ods'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">📊</span>;
  }

  // 演示文稿文件
  if (['ppt', 'pptx', 'odp', 'key'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">📊</span>;
  }

  // 压缩文件
  if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'tgz'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">📦</span>;
  }

  // 代码文件
  if (['js', 'ts', 'jsx', 'tsx', 'html', 'css', 'scss', 'php', 'py', 'java', 'cpp', 'c', 'h', 'cs', 'go', 'rb', 'rs', 'swift'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">💻</span>;
  }

  // 可执行文件
  if (['exe', 'msi', 'bat', 'sh', 'cmd', 'com', 'app'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">⚙️</span>;
  }

  // 数据库文件
  if (['db', 'sql', 'sqlite', 'mdb', 'accdb'].includes(cleanExt)) {
    return <span className="mr-2 text-lg">🗄️</span>;
  }

  // 默认文件图标
  return <span className="mr-2 text-lg">📄</span>;
};

const FileTable: React.FC<FileTableProps> = ({
  files,
  loading,
  onFolderClick,
  onFileClick,
  formatFileSize,
  ...tableProps
}) => {
  // 准备表格数据
  const tableData = useMemo(() => files.map<TableData>((file, index) => ({
    ...file,
    key: index,
    type: file.isDirectory ? "文件夹" : file.ext || "文件",
    size: file.isDirectory ? "-" : formatFileSize(file.size || 0),
    modified: file.modified ? new Date(file.modified).toLocaleString() : "-",
  })), [files, formatFileSize]);

  // 表格列定义
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      render: (text: string, record: any) => (
        <div className="flex items-center">
          {getFileIcon(record.ext, record.isDirectory)}
          <span>{text}</span>
        </div>
      )
    },
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '大小',
      dataIndex: 'size',
    },
    {
      title: '修改时间',
      dataIndex: 'modified',
    },
  ];

  return (
    <div>
      <Table<TableData>
        size="mini"
        loading={loading}
        data={tableData}
        columns={columns}
        pagination={false}
        onRow={(record: any) => {
          return {
            onDoubleClick: () => {
              if (record.isDirectory) {
                onFolderClick(record.name);
              } else {
                onFileClick(record.name);
              }
            },
            style: { cursor: 'pointer' }
          };
        }}
        {...tableProps}
      />
    </div>
  );
};

export default FileTable;